<template>
	<!-- <view class="content">
		<view class="card" @click="ToFile()">文档</view>
		<view class="card" @click="ToImage()">图片</view>
		<view class="card" @click="ToVideo()">视频</view>
	</view> -->
	<topbar @tabItemClick="handleItemClick" :options="options" :tabItem="tabItem"></topbar>

</template>

<script>
  import topbar from '@/components/top-tabbar/top-tabbar.vue'
  export default{
	  components:{
		  topbar
	  },
	  data(){
		  return {
			  options:{
				  top_backgroundcolor:'#e64d3a',
				  top_itemcolor:'#000000',
				  top_itemselectcolor:'#ffffff'
			  },
			  tabItem: [
				  {
					  name: '文件',
					  id: 2001
				  },
				  {
					  name: '图片',
					  id: 2002
				  },
				  {
					  name: '视频',
					  id: 2003
				  }
			  ]
		  };
	  },
	  onLoad() {
	  	// uni.navigateTo({
	  	// 	url:'/pages/main/tabbar/tabbar-1/file'
	  	//  });
	  },
	  methods:{
		  handleItemClick(e) {

			if(e.index === 2001){
				uni.navigateTo({
					url:'/pages/main/tabbar/tabbar-1/file'
				 });
			}else if(e.index === 2002){
				uni.navigateTo({
					url:'/pages/main/tabbar/tabbar-1/image'
				 });
			}else if(e.index === 2003){
				uni.navigateTo({
					url:'/pages/main/tabbar/tabbar-1/video'
				 });
			}
		  }
	  },
}


</script>


<style>
.container {
    position: relative; /* 容器需要有定位属性作为子元素绝对定位的基准 */
    min-height: 100vh; /* 确保容器至少和视窗一样高 */
}
.file-item {
	margin-bottom: 10px;
	border: 1px solid #000000;
	font-size: 15px;
	display: flex;
	justify-content: space-between; /* 两端对齐 */
	align-items: center; /* 垂直居中 */
	padding: 10px 0; /* 上下padding让列表项更易点击 */
  
}
.files{
	padding: 3px 3px;
	width: 350px;
	overflow: hidden; /* 溢出部分隐藏 */
	text-overflow: ellipsis; /* 溢出部分显示省略号 */
	white-space: nowrap; /* 不换行 */
}
.download{
	text-align: center;
	font-size: 10px;
	width: 40px;
	height: 20px;
	border: 1px solid black;
	cursor: pointer; /* 如果是web平台，可以显示指针光标 */
}

.upload-input-wrapper {
 position: fixed; /* 使用固定定位 */
  right: 20px; /* 距离屏幕右边界20px */
  bottom: 20px; /* 距离屏幕底部边界20px */
  display: flex;
  align-items: center;
}

.upload-input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}

.upload-btn {
  display: inline-block;
  padding: 8px 25px;
  margin-left: 15px; /* 左边距离选择文件按钮的间距 */
  background-color: #28a745; /* 按钮背景色 */
  color: white; /* 文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 更改鼠标指针 */
  transition: background-color 0.3s ease; /* 平滑背景色过渡 */
}

.upload-btn:hover {
  background-color: #218838; /* 悬停时的背景色 */
}
</style>
